<template>
  <div class="menu-wrapper">
    <!--    <company-dialog ref="officeDialog" @confirm="dialogConfirm" />-->
    <!--    <office-dialog ref="officeDialog" @confirm="officeConfirm"/>-->
    <el-form ref="form" :model="form" label-width="120px">
      <div style="width: 100%;display: flex;align-items: flex-end;border-bottom: 1px #eee solid;margin-bottom: 20px">
        <span style="font-size: 18px;color:#409EFF;margin: 10px 0;">车辆信息</span>
      </div>
      <el-form-item label="司机姓名:" prop="name">
        <el-col>
          <span>{{ form.name }}</span>

        </el-col>
      </el-form-item>
      <el-form-item label="联系电话:" prop="phone">
        <el-col :span="6">
          <span>{{ form.phone }}</span>
        </el-col>
      </el-form-item>
      <el-form-item label="车牌号码:" prop="plate">
        <el-col>
          <span>{{ form.plate }}</span>
        </el-col>
      </el-form-item>
      <el-form-item label="审核说明:" prop="msg" v-if="form.msg">
        <el-col :span="6">
          <span>{{ form.msg }}</span>
        </el-col>
      </el-form-item>
      <el-form-item label="审核状态 :" prop="status">
        <el-col :span="6">
          <el-tag :type="form.status === 0 ?  'info' : (form.status === 1 ? 'success' : 'warning')">
            <span>{{ form.status | car }}</span>
          </el-tag>
        </el-col>
      </el-form-item>
      <el-form-item label="所属账户 :" prop="companyName">
        <el-col :span="6">
            <span>{{ form.companyName }}</span>
        </el-col>
      </el-form-item>
      <el-form-item label="创建日期:" prop="createDate">
        <el-col :span="6">
          <span>{{ form.createDate|formatDate2Time }}</span>
        </el-col>
      </el-form-item>
      <el-form-item label="修改日期:" prop="modifyDate" v-if="form.modifyDate">
        <el-col :span="6">
          <span>{{ form.modifyDate|formatDate2Time }}</span>
        </el-col>
      </el-form-item>
      <div style="width: 100%;display: flex;align-items: flex-end;border-bottom: 1px #eee solid;margin-bottom: 20px">
        <span style="font-size: 18px;color:#409EFF;margin: 10px 0;">资料信息</span>
      </div>
      <el-form-item label="身份证号:" prop="idNo">
        <el-col :span="6">
          <span>{{ form.idNo }}</span>
        </el-col>
      </el-form-item>
      <el-form-item label="身份证国徽面:" prop="createDate">
        <el-col :span="6">
          <div class="account_item">
            <div class="shop_img">
              <a :href="form.metaInfo.legalPerson1" target="_blank">
                <el-image :src="form.metaInfo.legalPerson1"
                          style="width:140px;height:140px"
                          @click="clickImage"
                          v-if="form.metaInfo.legalPerson1"></el-image>
              </a>
              <span class="shop_img_notitle" v-if="!form.metaInfo.legalPerson1">危险化学品经营许可证</span>
            </div>
          </div>
        </el-col>
      </el-form-item>
      <el-form-item label="身份证人像面:" prop="createDate">
        <el-col :span="6">
          <div class="account_item">
            <div class="shop_img">
              <a :href="form.metaInfo.legalPerson2" target="_blank">
                <el-image :src="form.metaInfo.legalPerson2"
                          style="width:140px;height:140px"
                          @click="clickImage"
                          v-if="form.metaInfo.legalPerson2"></el-image>
              </a>
              <span class="shop_img_notitle" v-if="!form.metaInfo.legalPerson2">危险化学品经营许可证</span>
            </div>
          </div>
        </el-col>
      </el-form-item>
      <el-form-item>
        <div class="button">
          <el-tooltip class="item" effect="dark" placement="top-start" v-permission="['vehicleManagement.edit']"
                      content="修改"
                      v-if="form.status != 1">
            <el-button type="danger" @click="update">修 改</el-button>
          </el-tooltip>

          <el-tooltip class="item" effect="dark" placement="top-start" v-permission="['vehicleManagement.process']"
                      content="审核"
                      v-if="form.status != 1">
            <el-button :loading="loading" @click="checkClick" type="primary">审 核</el-button>
          </el-tooltip>
          <el-tooltip class="item" effect="dark" placement="top-start" v-permission="['vehicleManagement.reject']"
                      content="驳回"
                      v-if="form.status != 2">
            <el-button @click="rejectClick" type="warning">驳 回</el-button>
          </el-tooltip>
        </div>
      </el-form-item>
    </el-form>

    <el-dialog
      title="驳回请求"
      :visible.sync="isShow"
      width="40%"
      @close='closeDialog'
      left>
      <div
        style="display: flex; flex-direction: column; justify-content: center;align-items: stretch;font-size: 15px; line-height: 30px;">
        <div
          style="display: flex; flex-direction: row; justify-content: center; align-items: center;font-size: 15px; line-height: 30px;margin:0">
          <span style="width:150px;letter-spacing:6px;text-align: center;padding-left: 3px;">审核说明:</span>
          <el-input style="height: 90%" @change="rejectClick" v-model="form.msg" clearable
                    placeholder="请输入驳回原因"></el-input>
        </div>
      </div>
      <div slot="footer" class="dialog-footer">
        <!--        <el-button @click="">取消</el-button>-->
        <el-button type="primary" :loading="loading" @click="updateCar">驳回</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<style scoped>
.menu-wrapper {
  margin: 15px;
}

.account_item {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
}

.account_item_title {
  font-size: 14px;
  color: #606266;
  font-weight: 700;
  width: 160px;
  display: block;
}

.shop_img {
  min-width: 160px;
  height: 160px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12), 0 0 6px rgba(0, 0, 0, 0.04);
  margin: 0 5px;
  border-radius: 6px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.shop_img a {
  width: 140px;
  height: 140px;
}
</style>
<script>
import {EventBus} from "@/api/eventBus";
import utils from "../../utils/utils.js";
import md5 from "js-md5";
import {find, update} from "@/api/car";
import permission from "@/directive/permission/index.js"; // 权限判断指令
import loadMore from "@/utils/loadMore";


export default {
  name: "vehicleManagement-detail",
  directives: {permission, loadMore},
  data() {
    return {
      id: '',
      form: {},
      carCheckForm: {
        id: '',
        status: '',
        msg: "",
      },
      loading: false,
      isShow: false
    };
  },
  created() {
    var _this = this;
    _this.getData();
  },
  watch: { // 路由地址不变的情况下,如果id变化则重新获取数据
    $route(newVal, oldVal) {
      if (newVal.name == 'vehicleManagement-detail' && newVal.query.id != this.id) {
        this.getData()
      }
    },
  },
  filters: {
    //过滤到时间
    formatDate2Time(val) {
      let date = new Date(val);
      let y = date.getFullYear();
      let MM = date.getMonth() + 1;
      MM = MM < 10 ? "0" + MM : MM;
      let d = date.getDate();
      d = d < 10 ? "0" + d : d;
      let h = date.getHours();
      h = h < 10 ? "0" + h : h;
      let m = date.getMinutes();
      m = m < 10 ? "0" + m : m;
      let s = date.getSeconds();
      s = s < 10 ? "0" + s : s;
      return y + "-" + MM + "-" + d + " " + h + ":" + m + ":" + s;
    },
    car(val) {
      if (val == 0) {
        return '待审核'
      } else if (val == 1) {
        return '已审核'
      } else if (val == 2) {
        return '已驳回'
      }
    }
  },
  methods: {
    getData() {
      this.id = this.$route.query.id;
      var _this = this;
      find(_this.id)
        .then(response => {
          console.log("请求返回的数据", response);
          if (response.type == "success") {
            _this.form = response.data.car;
            // console.log("变更后的数据",_this.form);
          } else {
            _this.$message({
              message: response.content,
              offset: 120,
              center: true
            });

          }
        })
        .catch(error => {
        });
    },

    update() {
      this.$router.push({
        path: '/vehicleManagement/edit',
        query: {id: this.id}
      });
    },

    closeDialog(){
      this.form.msg = ''
    },
    rejectClick() {
      let _this = this;
      _this.isShow = true;
      _this.carCheckForm.id = this.form.id;
      _this.carCheckForm.status = 2;
      _this.carCheckForm.msg = this.form.msg;
      _this.carCheckForm.status = parseInt(this.carCheckForm.status);
      // console.log(this.carCheckForm.status, "--", this.form.status)
    },
    checkClick() {
      let _this = this;
      this.$confirm('是否确定通过认证?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: "warning",
      }).then(() => {
        _this.loading = true;
        _this.carCheckForm.id = this.form.id;
        _this.carCheckForm.status = 1;
        update(_this.carCheckForm).then(res => {
          _this.loading = false;
          if (res.type == "success") {
            let data = _this.formatList(res.data);
            console.log("审核完返回给列表的数据--" + JSON.stringify(data));
            EventBus.$emit("vehicleManagement-edit", data);
            _this.$store
              .dispatch("tagsView/delView", _this.$route)
              .then(({visitedViews}) => {
                _this.$router.push({
                  path: "/vehicleManagement/list",
                  query: {id: _this.form.id}
                });
              }); // 关闭当前tab回到列表
          } else {
            _this.$message({
              message: res.content,
              offset: 120,
              center: true
            });
          }
        })
          .catch(error => {
            _this.loading = false;
          });

      });

    },

    updateCar() {
      const _this = this;
      var list = {
        id: this.form.id,
        status: 2,
        msg: this.form.msg,
      }
      console.log("数据--" + list.msg, this.carCheckForm);
      if (list.msg !== "") {
        _this.loading = true;
        update(list)
          .then(response => {
            _this.loading = false;
            _this.isShow = false;
            if (response.type == "success") {
              let data = _this.formatList(response.data);
              console.log("修改完返回给列表的数据--" + JSON.stringify(data));
              EventBus.$emit("vehicleManagement-edit", data);
              _this.$store
                .dispatch("tagsView/delView", _this.$route)
                .then(({visitedViews}) => {
                  _this.$router.push({
                    path: "/vehicleManagement/list",
                    query: {id: _this.form.id}
                  });
                }); // 关闭当前tab回到列表
            } else {
              _this.$message({
                message: response.content,
                offset: 120,
                center: true
              });
            }
          })
          .catch(error => {
            _this.loading = false;
            _this.isShow = false;
          });
      } else {
        _this.$message({
          message: "驳回原因不能为空",
          offset: 120,
          center: true,
          type: "error"
        });
      }
    },
    //过滤成日期
    formatDate2Day(val) {
      let date = new Date(val);
      let y = date.getFullYear();
      let MM = date.getMonth() + 1;
      MM = MM < 10 ? "0" + MM : MM;
      let d = date.getDate();
      d = d < 10 ? "0" + d : d;
      return y + "-" + MM + "-" + d;
    },

    //过滤到时间
    formatDate2Time(val) {
      let date = new Date(val);
      let y = date.getFullYear();
      let MM = date.getMonth() + 1;
      MM = MM < 10 ? "0" + MM : MM;
      let d = date.getDate();
      d = d < 10 ? "0" + d : d;
      let h = date.getHours();
      h = h < 10 ? "0" + h : h;
      let m = date.getMinutes();
      m = m < 10 ? "0" + m : m;
      let s = date.getSeconds();
      s = s < 10 ? "0" + s : s;
      return y + "-" + MM + "-" + d + " " + h + ":" + m + ":" + s;
    },

    //过滤企业列表
    formatList(data) {
      data.createDate = this.formatDate2Day(data.createDate);
      data.modifyDate = this.formatDate2Time(data.modifyDate);
      data.rechangeDate = this.formatDate2Time(data.rechangeDate);
      return data;
    },
    // 防止点击 el-imgae 后将页面设置为 document.body.style.overflow = 'hidden'
    clickImage() {
      document.body.style = '';
    },
  }
};
</script>
